<template>
	<view class="info">
		<view class="info_head">
			<image class="info_head_pho" :src="info.avatar==''?'@/static/images/pages-veriFace/head.png':info.avatar" mode="">
			</image>
			<view class="info_head_name">
				{{info.realname}}
				<image
					:src="info.gender==1?'@/static/images/pages-veriFace/sex.png':'@/static/images/pages-veriFace/sexs.png'">
				</image>
			</view>
		</view>
		<view class="info_form">
			<view class="info_form_item">
				<view class="info_form_item_tit">
					<image :src="API_URL()+'images/img/grade.png'" mode=""></image> 年级
				</view>
				<view class="info_form_item_txt">
					{{info.grade_string}}
				</view>
			</view>
			<view class="info_form_item">
				<view class="info_form_item_tit">
					<image :src="API_URL()+'images/img/class.png'" mode=""></image> 班级
				</view>
				<view class="info_form_item_txt">
					{{info.class_string}}
				</view>
			</view>
			<view class="info_form_item">
				<view class="info_form_item_tit">
					<image :src="API_URL()+'images/img/stunum.png'" mode=""></image> 学号
				</view>
				<view class="info_form_item_txt">
					{{info.roll}}
				</view>
			</view>
		</view>
		<view class="info_btn" @click="typeIn" v-if="info.avatar==''">
			<image :src="API_URL()+'images/img/photo.png'" mode=""></image>
			录入照片
		</view>
		<view class="info_btn" @click="typeIn" v-else>
			<image :src="API_URL()+'images/img/photo.png'" mode=""></image>
			修改照片
		</view>
	</view>
</template>

<script>
	import {
		API_URL
	} from '@/env'
	export default {
		data() {
			return {
				info: {},
                rollname:'',
                roll:'',
			}
		},
		onShow() {
			this.getInfo()
		},
        onLoad(){
            this.rollname = this.$Route.query.rollname;
            this.roll = this.$Route.query.roll;
        },
		methods: {
            API_URL() {
                return API_URL
            },
			async getInfo() {

				let that = this;

				// return
				that
					.$http(
						"veriFace.info", {
							type: '3',
							roll: that.roll,
							realname: that.rollname
						},
					)
					.then(res => {
						console.log(res)
						if (res.code == 0) {
							that.info = res.data
						} else {
							// that.$u.toast(res.msg);
						}
					});

			},
			typeIn() {
				uni.navigateTo({
					//url: './typeIn'
					url: './face'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info {

		&_head {
			text-align: center;
			padding: 80rpx 0;

			&_pho {
				margin: 0 auto;
				width: 120rpx;
				height: 120rpx;
			}

			&_name {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				font-size: 30rpx;

				image {
					margin-left: 20rpx;
					width: 25rpx;
					height: 30rpx;
				}
			}
		}

		&_form {

			box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.11);
			border-radius: 20rpx;
			margin: 0 40rpx;

			&_item:last-child {
				border: none;
			}

			&_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
				border-bottom: 1px solid #E5E5E5;
				font-size: 30rpx;

				&_tit {
					display: flex;
					align-items: center;

					image {
						width: 70rpx;
						height: 70rpx;
						margin-right: 16rpx;
					}
				}

				&_txt {
					color: #8E8E8E;
				}
			}
		}

		&_btn {
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #1989F9;
			color: #1989F9;

			margin: 40rpx;
			border-radius: 20rpx;
			padding: 24rpx 30rpx;
			font-size: 30rpx;

			image {
				width: 40rpx;
				height: 34rpx;
				margin-right: 20rpx;
			}
		}
	}

	.flex {
		display: flex;
		align-items: center;
	}
</style>